<template>
  <!-- 修改密码 -->
  <div class="accountadd">
    <div class="header">修改密码</div>
    <div class="main">
      <el-form
        :model="Modify"
        :rules="rules"
        ref="Modify"
        label-width="100px"
        class="demo-Modify"
      >
        <!-- 原密码 -->
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
            type="password"
            v-model="Modify.oldPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="Modify.newPwd" autocomplete="off">
          </el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="Modify.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 确认按钮 -->
      <div class="btn">
        <el-button size="small" type="primary" @click="passwordAddto"
          >确定</el-button
        >
        <!-- 重置按钮 -->
        <el-button size="small" @click="passwordReset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { checkpassword } from '@/utils/utils'
import { checkoldPwdAccount, editpassword } from '@/api/user';
export default {
  data () {
    //验证新密码
    const checkNewPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      }
      else if (this.Modify.oldPwd === value) {
        callback(new Error('新密码不能和旧密码相同'))
      }
      else if (!/^[a-zA-Z0-9_-]{6,12}$/.test(value)) {
        callback(new Error('数字，字母，6到12位'))
      } else {
        //如果输入了确认密码 再操作新密码还需要验证一次 确认密码的验证函数
        if (this.Modify.twicePwd !== '') {
          this.$refs.Modify.validateField('twicePwd')
        }
        callback()
      }
    }
    //验证确认密码
    const checkTwicePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      }
      else if (value !== this.Modify.newPwd) {
        callback(new Error('密码不一致'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据
      Modify: {
        oldPwd: '',
        newPwd: '',
        checkPass: ""
      },
      //表单验证
      rules: {
        oldPwd: [
          { validator: checkpassword, trigger: 'blur' }
        ],
        newPwd: [
          { validator: checkNewPwd, trigger: 'blur' }
        ],
        checkPass: [
          { validator: checkTwicePwd, trigger: 'blur' },
        ]
      }

    }
  },
  methods: {
    // async getData () {
    //   let res = await checkoldPwdAccount({ oldPwd: this.oldPwd })
    //   let { code, msg } = res.data
    //   if (code == '00') {
    //     this.$message({
    //       type: 'success',
    //       message: msg
    //     })
    //   } else {
    //     this.$message.error(msg);
    //   }
    // },
    //表单验证
    passwordAddto () {
      this.$refs.Modify.validate(async (valid) => {
        if (valid) {
          let res = await checkoldPwdAccount({ oldPwd: this.Modify.oldPwd })
          let { code, msg } = res.data
          if (code == '00') {
            let rest = await editpassword({ newPwd: this.Modify.newPwd })
            let { code, msg } = rest.data
            if (code == 0) {
              
              this.$router.push('/login')
            } 
          } else {
            this.$message.error(msg)
          }
        } else {
          console.log('"验证失败了" :>> ', "验证");
        }
      })
    },
    //重置
    passwordReset () {
      this.$refs.Modify.resetFields()
    }
  },
}
</script>

<style lang="less" scoped>
.header {
  line-height: 50px;
  padding-left: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
.main {
  margin-top: 20px;
  padding-left: 30px;
  padding-bottom: 30px;
  width: 400px;
  .btn {
    width: 400px;
    display: flex;
    justify-content: center;
  }
}
</style>